/**
 * @Name:    layout.css
 * @Object:  pc/mobile
 * @Author:  XiaoYu/Guo CJ
 * @E-mail:  592429285@qq.com
 * @Time:    2023.03.18
 */
@charset "UTF-8";
@import './global';

/*在 480 和 767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media screen and (max-width: 767px) {
	// .container {min-width: 100%;}
}

/*在 768 和 991 像素之间的屏幕里，小屏幕，主要是 PAD*/
@media screen and (min-width: 768px) and (max-width: 960px) {
	// .container {min-width: 7.68rem;}
}

/*在 992 和 1199 像素之间的屏幕里，中等屏幕，分辨率低的 PC*/
@media screen and (min-width: 960px) and (max-width: 1200px) {
	// .container {min-width: 9.6rem;}
}

/*当页面大于 1200rem 时，大屏幕，主要是 PC 端*/
@media screen and (min-width: 1200px) {
	// .container-full {min-width: 12rem;}
	// .container {width: 12rem;}
}

.operation-bar {
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	margin-bottom: .15rem;
}

/* ==== element plus 样式重置 === */
// 图标
.el-icon {
	margin-right: .05rem;
	vertical-align: text-bottom;
}
// 表单
.el-select-dropdown__item { // 下拉选择框 option 设置
	color: $color-888 !important;
	&.selected {
		color: $color-night !important;
	}
}

.el-form {
	.el-form-item {
		margin-bottom: .15rem;
	}
    label.el-form-item__label {
        display: none;
        text-indent: -999rem;
    }

	.el-input.error .el-input__wrapper.is-focus,
	.el-input .el-input.is-focus .el-input__wrapper,
	.el-select .el-input.is-focus .el-input__wrapper,
	.el-input .el-input__wrapper.is-focus,
	.el-select .el-input__wrapper.is-focus,
	.el-select .el-select_-wrapper.is-focused {
		box-shadow: 0 0 0 .01rem $color-night inset !important;
	}

	.el-input.error .el-input__wrapper,
	.el-select .el-input.error .el-input__wrapper,
	.el-select.error .el-input .el-input__wrapper,
	.el-input.error .el-input__wrapper {
		box-shadow: 0 0 0 .01rem red inset !important;
	}

	// 表格
	.el-table {
		color: $color-888;
		
		border-radius: .03rem;
		.el-table__header {
			.el-table__cell {
				padding-top: .15rem;
				padding-bottom: .15rem;
				background-color: $bg-color-table-header !important;
			}
		}
		tr.el-table__row {
			td.el-table__cell, 
			td.el-table__cell .cell {
				padding-top: 0;
				padding-bottom: 0;
			}
		}
		
		// 表格操作栏
		.table-operation-bar {
			display: -webkit-flex;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.el-button {
				padding: .05rem;
			}
			.el-icon {
				margin-right: .03rem;
				font-size: .15rem;
			}
		}
		th .table-operation-bar {
			justify-content: space-between;
		}

		.el-table__body tr.current-row>td.el-table__cell {
			background-color: $color-white;
		}

		// 修复 table 固定列 的th::before {bottom: -1px} 导致的纵向1px滚动条
		.el-table__body-wrapper tr td.el-table-fixed-column--left.is-first-column::before,
		.el-table__body-wrapper tr td.el-table-fixed-column--left.is-last-column::before,
		.el-table__body-wrapper tr td.el-table-fixed-column--right.is-first-column::before,
		.el-table__body-wrapper tr td.el-table-fixed-column--right.is-last-column::before,
		.el-table__body-wrapper tr th.el-table-fixed-column--left.is-first-column::before,
		.el-table__body-wrapper tr th.el-table-fixed-column--left.is-last-column::before,
		.el-table__body-wrapper tr th.el-table-fixed-column--right.is-first-column::before,
		.el-table__body-wrapper tr th.el-table-fixed-column--right.is-last-column::before,
		.el-table__footer-wrapper tr td.el-table-fixed-column--left.is-first-column::before,
		.el-table__footer-wrapper tr td.el-table-fixed-column--left.is-last-column::before,
		.el-table__footer-wrapper tr td.el-table-fixed-column--right.is-first-column::before,
		.el-table__footer-wrapper tr td.el-table-fixed-column--right.is-last-column::before,
		.el-table__footer-wrapper tr th.el-table-fixed-column--left.is-first-column::before,
		.el-table__footer-wrapper tr th.el-table-fixed-column--left.is-last-column::before,
		.el-table__footer-wrapper tr th.el-table-fixed-column--right.is-first-column::before,
		.el-table__footer-wrapper tr th.el-table-fixed-column--right.is-last-column::before,
		.el-table__header-wrapper tr td.el-table-fixed-column--left.is-first-column::before,
		.el-table__header-wrapper tr td.el-table-fixed-column--left.is-last-column::before,
		.el-table__header-wrapper tr td.el-table-fixed-column--right.is-first-column::before,
		.el-table__header-wrapper tr td.el-table-fixed-column--right.is-last-column::before,
		.el-table__header-wrapper tr th.el-table-fixed-column--left.is-first-column::before,
		.el-table__header-wrapper tr th.el-table-fixed-column--left.is-last-column::before,
		.el-table__header-wrapper tr th.el-table-fixed-column--right.is-first-column::before,
		.el-table__header-wrapper tr th.el-table-fixed-column--right.is-last-column::before {
			bottom: 0;
		}
	}
}
// 按钮
.el-button.btn {
	padding: 0.08rem 0.15rem;
	width: auto;
	height: auto;
	border-radius: .03rem;
	&.btn-lg {
		padding: 0.08rem 0.2rem;
	}
}
// 輸入框
.el-input {
	--el-input-focus-border-color: transparent !important;
}
input {
    &.el-input__inner {
        padding: 0;
        height: .32rem;
        line-height: .32rem;
        border-radius: 0;
        border: none;
        background-color: transparent;

        &:focus {
            box-shadow: none;
        }
    }
    .el-form .el-table &{
        &::-webkit-input-placeholder {
            font-size: .12rem;
       }
    }
}
.el-popover.el-popper {
	font-size: .12rem !important;
}
// 卡片
.el-card {
	.el-card__header, .el-card__body {
		padding: .15rem;
	}
	.el-card__header {
		padding-top: .1rem;
		padding-bottom: .1rem;
		background-color: $color-f8;
	}
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

// tab
.el-tabs {
	&.el-tabs--card>.el-tabs__header .el-tabs__nav {
		border: none;
		.el-tabs__item {
			color: $color-888;
			background-color: $color-f8;
			border-radius: .1rem .1rem 0 0;
			border: .01rem solid #e4e7ed;
			font-weight: bold;
			&:hover, &.is-active {
				color: $color-night;
				background-color: $color-white;
				border-bottom-color: transparent;
			}
		}
	}
}
// 分页导航
.pagination-container {
	.el-pagination.is-background .btn-next.is-active, 
	.el-pagination.is-background .btn-prev.is-active, 
	.el-pagination.is-background .el-pager li.is-active {
		background-color: $color-night;
	}
	.el-pager li, .el-pagination button {
		color: $color-888;
		&:hover {
			color: $color-night;
		}
	}
	// .el-select .el-input.is-focus .el-input__wrapper {
	// 	box-shadow: 0 0 0 .01rem $color-night !important;
	// }
	.el-input__wrapper {
		&.is-focus {
			box-shadow: 0 0 0 .01rem $color-night inset;
		}
	}
}

/* 页面 */ 
html, body, #app {
	height: 100%;
}
body {background-color: $color-white;}
#app {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#nprogress .bar {
	background-color: $color-night !important;    //这里自定义颜色
}
.container-full {min-width: 12rem;}

.container {
    margin: 0 auto;
    padding-left: .2rem;
    padding-right: .2rem;
	width: 12rem;

    body &-full {
        position: relative;
        width: 100%;
    }

    & > .row {
        margin-left: -.2rem;
        margin-right: -.2rem;
    }
}
.page {
	padding-top: .4rem;
}
.mb-40 {
	margin-bottom: .4rem;
}
.mb-50 {
	margin-bottom: .5rem;
}
.pt-80 {
	padding-top: .8rem;
}
.pt-50 {
	padding-top: .5rem;
}
.fs-12 {
	font-size: .12rem;
}
.fs-14 {
	font-size: .14rem;
}
.fs-16 {
	font-size: .16rem;
}
.fs-18 {
	font-size: .18rem;
}
.icon-common {
	font-size: .18rem !important;
	vertical-align: text-bottom;
}
.wait-load {
	background-color: $color-f2;
	background-image: url('@/assets/images/img-default.png');
	background-position: center center;
	background-size: 60%;
	background-repeat: no-repeat;
}
.color-theme {
	color: $color-theme;
}
.bgcolor-theme {
	background-color: $color-theme;
}
.bgcolor-theme-hover {
	background-color: $color-theme-hover;
}
.bgcolor-page {
	background-color: $color-f9;
}

.little-banner {
	margin-bottom: .3rem;
	border-radius: .05rem;
	overflow: hidden;
}





